<template>
  <t-drawer v-model:visible="drawerVisible" header="线索跟进记录" size="large">
    <t-timeline mode="same">
      <template v-for="item in projectRecords" :key="item.recordId">
        <t-timeline-item :label="dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') + ' - ' + item.createUserName">
          {{ item.recordContent }}
          <template v-for="item2 in item.fileList" :key="item2.fileId">
            <t-link target="_blank" :href="item2.filePath" theme="primary" underline
              >{{ item2.originalFileName }}
            </t-link>
          </template>
        </t-timeline-item>
      </template>
    </t-timeline>
    <!--    <t-space direction="vertical" align="center">-->
    <!--      <t-empty />-->
    <!--    </t-space>-->
    <t-button theme="primary" @click="projectRecordFormVisible = true">跟进</t-button>
  </t-drawer>

  <t-dialog v-model:visible="projectRecordFormVisible" header="添加跟进记录" width="800" @confirm="dialogConfirm">
    <template #body>
      <t-form ref="form" :data="projectRecordFormData" :rules="projectRecordRules" @submit="submitForm">
        <t-form-item label="跟进内容" name="recordContent">
          <t-textarea v-model="projectRecordFormData.recordContent" />
        </t-form-item>
        <t-form-item label="附件">
          <t-upload v-model="fileList" multiple :auto-upload="false"></t-upload>
        </t-form-item>
      </t-form>
    </template>
  </t-dialog>
</template>

<script setup lang="tsx">
import dayjs from 'dayjs';
import { FormRules, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import { ref, watch } from 'vue';

import { batchUpdateAliyun, post, saveOrUpdate } from '@/api/common';

const drawerVisible = ref(false);
const projectDetail: any = ref({});
const fileList = ref([]);
const form = ref();
const projectRecords = ref([]);

const projectRecordFormVisible = ref(false);
const projectRecordFormData = ref({
  recordContent: '',
});

const projectRecordRules: FormRules = {
  recordContent: [{ required: true, message: '请输入', type: 'error' }],
};

const emit = defineEmits(['update:visible']);

const props = defineProps<{
  visible: boolean;
  data: {};
}>();

const dialogConfirm = () => {
  form.value.submit();
};

const submitForm = async ({ validateResult, firstError }: SubmitContext) => {
  if (!firstError) {
    console.log('fileList = ', fileList);
    const r: any = await saveOrUpdate('/project/saveProjectRecord', {
      projectId: projectDetail.value.projectId,
      recordContent: projectRecordFormData.value.recordContent,
    });
    console.log('r', r);
    if (fileList.value.length > 0) {
      await batchUpdateAliyun(r.objId, r.objType, r.objTypeStr, fileList.value);
    }
    MessagePlugin.success('提交成功');
    projectRecordFormVisible.value = false;
    // await emit.refreshTable();
    // await emit('refreshTable');
  } else {
    console.log('Errors: ', validateResult);
    MessagePlugin.warning(firstError);
  }
};

watch(
  () => drawerVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);

watch(
  () => props.visible,
  (val) => {
    drawerVisible.value = val;
  },
);

watch(
  () => props.data,
  async (val) => {
    projectDetail.value = val;
    // 加载跟进记录
    const r: any = await post('/project/projectRecords', { projectId: projectDetail.value.projectId });
    console.log('r', r);
    projectRecords.value = r;
  },
);
</script>
